<template>
  <div class="design-selector">
    <el-input v-model="searchText" placeholder="输入设计名称搜索" clearable @clear="handleSearchClear"
      @keyup.enter="handleSearch">
      <template #append>
        <el-button @click="handleSearch">
          <el-icon>
            <Search />
          </el-icon>
        </el-button>
      </template>
    </el-input>

    <div class="design-list">
      <el-checkbox-group v-model="selectedDesigns" @change="handleSelectionChange">
        <el-row :gutter="20">
          <el-col v-for="design in filteredDesigns" :key="design.id" :xs="12" :sm="8" :md="6">
            <el-card shadow="hover" class="design-card">
              <el-checkbox :label="design.id">
                <div class="design-content">
                  <el-image :src="design.image" fit="cover" class="design-image"></el-image>
                  <div class="design-info">
                    <h4>{{ design.name }}</h4>
                    <p class="design-price">¥{{ design.price.toFixed(2) }}</p>
                    <p class="design-desc">{{ design.description }}</p>
                  </div>
                </div>
              </el-checkbox>
            </el-card>
          </el-col>
        </el-row>
      </el-checkbox-group>
    </div>

    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
      layout="prev, pager, next, sizes" @size-change="fetchDesigns" @current-change="fetchDesigns" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'

const emit = defineEmits(['selection-change'])

const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(0)
const designs = ref([])
const selectedDesigns = ref([])

const filteredDesigns = computed(() => {
  if (!searchText.value) return designs.value
  return designs.value.filter(design =>
    design.name.includes(searchText.value) ||
    design.description.includes(searchText.value)
  )
})

const fetchDesigns = async () => {
  try {
    // 这里调用后端接口获取设计数据
    // 模拟数据
    designs.value = Array.from({ length: 16 }, (_, i) => ({
      id: i + 1,
      name: `设计方案${i + 1}`,
      description: `这是第${i + 1}个设计方案描述`,
      price: Math.random() * 5000,
      image: `https://picsum.photos/300/200?random=${i}`
    }))
    total.value = designs.value.length
  } catch (error) {
    console.error('获取设计数据失败:', error)
  }
}

const handleSearch = () => {
  currentPage.value = 1
  fetchDesigns()
}

const handleSearchClear = () => {
  searchText.value = ''
  handleSearch()
}

const handleSelectionChange = () => {
  const selected = designs.value.filter(d =>
    selectedDesigns.value.includes(d.id)
  )
  emit('selection-change', 'design', selected)
}

onMounted(() => {
  fetchDesigns()
})
</script>

<style scoped>
.design-selector {
  padding: 10px;
}

.design-list {
  margin: 20px 0;
}

.design-card {
  margin-bottom: 20px;
}

.design-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.design-image {
  width: 100%;
  height: 150px;
}

.design-info {
  padding: 10px;
}

.design-price {
  color: #f56c6c;
  font-weight: bold;
  margin: 5px 0;
}

.design-desc {
  color: #909399;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
